<template>
  <div class="errorpage" id="bgstar" ref="bgstar">
    <img
      :src="pic"
      class="myimg"
      :class="{ 'animated zoomInDown': flag, 'animated zoomOutDown': !flag }"
    />
    <!-- 4秒后zoomOutDown的效果 -->
    <div class="down" @click="gotopage">{{ timeCount }}S后跳转</div>
    <span class="spandot" v-for="(l, i) in spanList" :key="i" :style="l"></span>
  </div>
</template>

<script>
import pic from "@/assets/images/404.png";

export default {
  data() {
    return {
      pic: pic,
      spanList: [],
      timeCount: 5,
      flag: true,
      timer:null,    //timer写在data里定时器才清得掉
    };
  },
  methods: {
    spanInit() {
      var height = document.querySelector("#bgstar").clientHeight;
      var width = this.$refs.bgstar.clientWidth; //这个是操作dom节点，所以必须放在mounted里面
      // console.log(width, height);
      for (var i = 0; i < 520; i++) {
        var left = Math.random() * width;
        var top = Math.random() * height;
        var rate = Math.random() * 2.5;
        var scaler = Math.random() * 1.5;
        var opacity = Math.random() * 1;

        this.spanList.push({
          left: left + "px",
          top: top + "px",
          animationDelay: rate + "s",
          transform: `scale(${scaler})`,
          background: `rgba(255, 255, 255, ${opacity})`,
        });
      }
    },
    timeDown() {
      this.timer = setInterval(() => {
        if (this.timeCount > 1) {
          this.timeCount--;
        } else if (this.timeCount > 0) {
          this.flag = !this.flag;
          this.timeCount--;
        } else {
          clearInterval(this.timer);
          this.timer = null;
          this.gotopage();
        }
      }, 1000);
    },
    gotopage() {
      this.$router.push("/main");
    },
  },
  mounted() {
    this.spanInit();
    this.timeDown();
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>

<style lang="scss" scoped>
.errorpage {
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  padding: 0 !important;
  overflow: hidden;
  .down {
    position: absolute;
    left: 20px;
    top: 20px;
    border: 1px solid #fff;
    color: #fff;
    width: 70px;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    line-height: 30px;
  }
  .dao {
    position: absolute;
    top: 20px;
    right: 20px;
    ::v-deep .van-circle__text {
      color: #fff !important;
    }
  }
  .myimg {
    width: 270px;
    height: 270px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
    // left: 50%;      为了配合动画效果就不能这么写
    // top: 50%;
    // transform: translate(-50%, -50%);
  }
  .spandot {
    position: absolute;
    z-index: 100;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;
  }
  @keyframes flash {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.5;
    }
  }
}
</style>
